<template>
  <div>Helloworld {{ a }}</div>
  <div class="box"></div>
  <div>
    <button @click="add">添加</button>
    <button @click="stop">停止</button>
  </div>

  <div v-if="chat">
    <div v-for="(message, index) in chat.messages.value">
      <div v-if="message.type == 'ask'">
        {{ message.text }}
      </div>
      <div v-if="message.type == 'answer'">
        answer
        <div v-for="(chunk, i) in message.chunks.value" v-html="chunk.result"></div>
        <button @click="message.stop()">停止</button>
      </div>
    </div>
    <div v-if="chat.isWait.value">等待回应</div>
  </div>
</template>
<script>
import axios from 'axios'
import ChatTask from './class/ChatTask.class.js'
import { markRaw } from 'vue'
export default {
  data() {
    return {
      a: 1,
      chat: null
    }
  },
  methods: {
    add() {
      this.chat.ask()
    }
  },
  watch: {
    a(newValue) {
      console.log(`helloworld`, newValue)
    }
  },
  mounted() {
    console.log(`helloworld`)
    this.chat = markRaw(new ChatTask())
    this.a++
  }
}
</script>
<style lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
